<template>
	<view class="container">
		<view class="head mb-30">
			<view class="tabs flex align-end">
				<view 
					class="item w-50 flex justify-center align-center sel" 
					:class="current===index?item.style1:item.style2"
					v-for="(item, index) in tabList"
					:key="item.id"
					@click="onTabs(index)"
				>
					<image class="width-30 height-30" :src="current===index?item.icon2:item.icon1"></image>
					<text class="ml-10">{{item.name}}</text>
				</view>
			</view>
			<view class="bg-white border-radius-br-10 border-radius-bl-10 padding-30 height-148">
				<view class="flex" v-if="current===0">
					<view class="w-50 flex justify-between">
						<view>
							<view class="fsize-32 fweigh-600">堂食台号</view>
							<view class="fsize-22 line-gray mt-10">餐品将送至您的餐台</view>
						</view>
						<view style="border-right:1px #EDEDED solid;width:1px"></view>
					</view>
					<view class="w-50 flex justify-between align-center">
						<text class="w-100 fsize-70 text-align-center fweigh-600">#{{stock.deskNumber}}</text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
				<view class="" v-if="current===1">
					<view class="flex align-center">
						<text class="fsize-28 fweigh-600">{{stock.storeName}}</text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
					<view class="mt-10 fsize-24 line-gray">{{stock.address}}</view>
				</view>
			</view>
		</view>
		<view class="mb-30 bg-white border-radius-10">
			<view class="padding-30" v-for="(item,index) in cart" :key="item.id">
				<view class="flex w-100">
					<image class="width-88 height-88 shrink0 mr-10" :src="item.FPic"></image>
					<view class="w-100 flex justify-between">
						<view class="w-100 ">
							<view class="fsize-28">{{item.FName}}</view>
							<view class="fsize-24 line-gray">{{item.FSpec}} {{item.FeedTasteNames}}</view>
						</view>
						<view class="flex flex-column justify-between shrink0 ml-10 text-align-right">
							<view>
								<text class="fsize-20">￥</text>
								<text class="fsize-28">{{item.FPosPrice}}</text>
							</view>
							<text class="fsize-26 line-gray">x{{item.number}}</text>
						</view>
					</view>
				</view>
			</view>
			<list-cell last>
				<view class="w-100 flex justify-between">
					<text class="fsize-28">优惠卷</text>
					<view class="flex align-center" @click="$u.route('/pages/user/coupon/coupon', {tickets:JSON.stringify(coupons)})">
						<text v-if="!coupon.id" class="fsize-24 line-gray">{{coupons.length > 0?coupons.length +'张': '暂无可用' }}</text>
						<text v-else class="fsize-24 line-red"> -￥{{coupon.reduceAmount}} </text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
			</list-cell>
			<list-cell last>
				<view class="w-100 flex justify-end align-center fsize-26">
					<text class="">共{{ cartNum }}件商品，合计</text>
					<view class="fweigh-600">
						<text class="fsize-30">￥</text>
						<text class="fsize-40">{{ cartAmount.toFixed(2) }}</text>
					</view>
				</view>
			</list-cell>
		</view>
		<view class="">
			<list-cell last radius>
				<view class="w-100 flex justify-between align-center">
					<text class="fsize-28">备注</text>
					<view class="flex align-center">
						<text class="fsize-24 mr-10">--</text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
			</list-cell>
		</view>
		<view class="footer" :style="">
			<view class="">
				<text>应付：</text>
				<text class="fweigh-600">
					<text class="fsize-30">￥</text>
					<text class="fsize-40">{{ cartAmount.toFixed(2) }}</text>
				</text>
			</view>
			<button type="primary" @click="createOrder">立即支付</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import listCell from '@/components/list-cell/list-cell.vue'
	import { requestPayment } from '@/utils/payment'
	import { pay } from "@/common/util.js"
	export default {
		components: {
			listCell
		},
		data() {
			return {
				current: 0,
				FType: 1,
				timer: null,
				tabList:[
					{
						id: 1,
						name:'堂食',
						icon1:'../../static/images/pay/ts-s.png',
						icon2:'../../static/images/pay/ts.png',
						style1:'sel',
						style2:'nosel'
					},
					{
						id: 2,
						name:'外带',
						icon1:'../../static/images/pay/dd-s.png',
						icon2:'../../static/images/pay/dd.png',
						style1:'ser',
						style2:'noser'
					},
				],
				cart:[],
				coupons: [],
				coupon: {
					id: 0,
					reduceAmount: 0
				}
			}
		},
		computed: {
			...mapState(['stock', 'orderType']),
			cartNum() {
				return this.cart.reduce((acc, cur) => acc + cur.number, 0)
			},
			cartAmount() {
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0) - this.coupon.reduceAmount
			},
			remark() {
				return this.$store.state.remark
			}
		},
		onShow() {
			this.getCat()
			this.FType = this.orderType
			this.current = this.FType===1?0:1
			uni.$on('isRefresh',(data)=>{
				this.coupon = data
			})
		},
		onUnload() {
			if(this.timer) {  
				clearTimeout(this.timer);  
				this.timer = null; 
			}
			uni.$off('isRefresh')
		},
		methods: {
			getCat(){
				this.$api.GetShoppingCart().then(res=>{
					this.cart = res.data.length === 0?[]:res.data.map(im=>{
						return {
							FItemID: im.fSubItemID,
							FFoodID: im.fFoodID,  
							FName: im.fName,  
							FPosPrice: im.fPosPrice,  
							number: im.fQty,  
							FPic: im.fProImage,  
							FSpec: im.fSpec,  
							FFoodSpecID: im.fFoodSpecID,  
							FRemark: im.fRemark,
							FeedTasteNames: im.feedTasteNames,
							FShoppingCartID: im.fShoppingCartID || 0,  
							feed_ids: im.feedData.length > 0 ? im.feedData.map(jm => jm.fFeedID) : [],  
							tast_ids: im.tastData.length > 0 ? im.tastData.map(jm => jm.fTastID) : [], 
						}
					})
					this.getFoodCartShopCouponList()
				})
			},
			onTabs(ix){
				if(this.current !== ix){
					this.current = ix
					if(ix===0){
						this.FType = 1
					}else {
						this.FType = 2
					}
				}
			},
			createOrder(){
				let _this = this
				_this.$api.SubmitOrder({
					FType:_this.FType,
					FDeskID:_this.stock.deskId,
					FCouponID: _this.coupon.id,
					reduceAmount: _this.coupon.reduceAmount
				}).then(res=>{
					pay(res.data.orderId)
					// _this.$api.OrderPay({ids: res.data.orderId, payment_code: 'wechatpay', payment_type:17,params:{}}).then(respay=>{
					// 	const params = respay.data.respData
					// 	// 天厥收银台支付
					// 	uni.openEmbeddedMiniProgram({
					// 		appId: params.appId,
					// 		path: params.path,
					// 		success(res) {
						    // 打开成功
								// _this.onToast('调取支付成功!')
								// uni.switchTab({
								// 	url: '/pages/tab_bar/order/order'
								// });
						// 	}
						// })
						
						// uni.requestPayment({
						// 	provider: 'wxpay',
						// 	timeStamp: params.payTimeStamp,
						// 	nonceStr: params.paynonceStr,
						// 	package: params.payPackage,
						// 	signType: params.paySignType,
						// 	paySign: params.paySign,
						// 	success: function(sucs) {
						// 		_this.onToast('支付成功')
						// 	},
						// 	fail: function(fail) {
						// 		if(fail.errMsg === 'requestPayment:fail cancel'){
						// 			_this.onToast('已取消支付')
						// 		}else {
						// 			_this.onToast(fail.errMsg)
						// 		}
						// 	},
						// })
					// })
				})
			},
			onToast(msg){
				this.$refs.uToast.show({
					message: msg,
					complete() {
						uni.switchTab({
							url: '/pages/tab_bar/order/order'
						});
					}
				})
			},
			getFoodCartShopCouponList(){
				this.$api.GetFoodCartShopCouponList({channelValue: this.FType + 1}).then(res=>{
					this.coupons = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding:0 30rpx 120rpx 30rpx;
		.head{
			.tabs{
				.sel{
					height: 84rpx;
					background:#fff;
					font-weight: 600;
					color:#111;
					border-radius: 10rpx 30rpx 0rpx 0rpx;
				}
				.ser{
					height: 84rpx;
					background:#fff;
					font-weight: 600;
					color:#111;
					border-radius: 30rpx 10rpx 0rpx 0rpx;
				}
				.nosel{
					height: 74rpx;
					color:#666;
					background: #EDEDED;
					border-radius: 10rpx 0 0 0;
				}
				.noser{
					height: 74rpx;
					color:#666;
					background: #EDEDED;
					border-radius: 0 10rpx 0 0;
				}
			}
		}
	}
	
	.footer {
		background-color: #FFFFFF;
		z-index: 10;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:10rpx 30rpx 60rpx 30rpx;
		
		button {
			text-align: center;
			padding: 0;
			line-height: 90rpx;
			color: #111111;	
			font-size: 30rpx;
			width: 280rpx;
			height: 90rpx;
			font-weight: bold;
			background: linear-gradient(34deg, #F3C45D, #EDAC2F);
			border-radius: 45rpx;
			margin: 0;
		}
	}
</style>
